<template>
  <div class="orderRecord">
    <top-bar :title="'订单记录'"/>
    <div class="content">
      <div class="buttons">
        <button v-for="item in buttons" :key="item.id"
                :class="{'stylesTrue': current==item.id}" @click="active(item.id)">
          {{ item.name }}
        </button>
      </div>
      <div class="orderRecord-items">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="item in current==1?orderList.list:gmRecharge.list" :key="item.id" class="gm-item">
              <div class="items-top">
                <span class="orderNumber">{{ item.order_id }}</span>
                <div>
                  <button v-clipboard:copy="item.order_id"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">复制
                  </button>
                </div>
              </div>
              <div class="items-center">
                <img :src="item.game_icon" alt="">
                <div class="gameInfo">
                  <span class="name">{{ item.game_name }}</span>
                  <span class="money">订单金额：￥{{ parseFloat(item.amount) }}</span>
                  <span class="time">{{ dateTransform(item.create_time, 'yyyy-MM-dd hh:mm:ss') }}</span>
                </div>
              </div>
              <div class="items-bottom">
                优惠券抵扣￥{{ parseFloat(item.coupon_amount) }}，
                <span v-if="current==1 && item.gm_amount > 0">K金支付￥{{ parseFloat(item.gm_amount) }}</span>
                <span v-else>实际支付：￥{{ parseFloat(item.real_amount) }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from './topBar'

export default {
  name: 'orderRecord',
  components: {
    topBar
  },
  data () {
    return {
      state: false,
      current: 1,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      buttons: [
        {
          id: 1,
          name: '游戏消费'
        },
        {
          id: 2,
          name: 'K金消费'
        }
      ]
    }
  },
  computed: {
    orderList () {
      return this.$store.state.orderList || {}
    },
    gmRecharge () {
      return this.$store.state.gmRechargeList || {}
    }
  },
  methods: {
    active (index) {
      this.current = index
      this.finished = false
      this.loading = true
      this.page = 0
      this.onLoad(0)
    },
    // 订单编号复制
    onCopy () {
      this.Toast('复制成功', 500)
    },
    onError () {
      this.Toast('复制失败', 500)
    },
    onLoad (timeout = 1000) {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false
        }
        this.page++
        if (this.page !== 1) {
          if (this.current == 1) {
            if (this.orderList.list.length >= this.orderList.count) {
              this.loading = false
              this.finished = true
              return;
            }
          } else {
            if (this.gmRecharge.list.length >= this.gmRecharge.count) {
              this.loading = false
              this.finished = true
              return;
            }
          }
        }
        let obj = {
          page: this.page,
          offset: 10,
          status: 2
        }
        if (this.current == 1) {
          this.$store.dispatch('getOrderList', obj)
          this.loading = false
          if (this.orderList.list.length >= this.orderList.count) {
            this.finished = true
          }
        } else {
          this.$store.dispatch('getGmRechargeList', obj)
          this.loading = false
          if (this.gmRecharge.list.length >= this.gmRecharge.count) {
            this.finished = true
          }
        }
      }, timeout)
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.loading = true
      this.page = 0
      this.onLoad()
    }
  },
  created () {
    if (!this.orderList.count) {
      let obj = {
        page: 1,
        offset: 10,
        status: 2
      }
      this.$store.dispatch('getOrderList', obj)
    }
  },
}
</script>

<style lang="scss" scoped>
.orderRecord {
  padding: 0.75rem 0.48rem;

  .content {
    margin-top: 0.67rem;

    .buttons {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.27rem;

      button {
        width: 4.44rem;
        height: 0.99rem;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 0.53rem;
        font-size: 0.4rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #333333;
        position: relative;
      }

      .stylesTrue {
        background: #FF0300;
        color: #FFFFFF;
      }
    }

    .orderRecord-items::-webkit-scrollbar {
      width: 0 !important
    }

    .orderRecord-items {
      height: 6.9rem;
      overflow: scroll;

      .gm-item {
        width: 100%;
        height: 4.56rem;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 0.32rem;
        padding: 0.48rem 0.3rem;
        margin-bottom: 0.37rem;

        .items-top {
          display: flex;
          margin-bottom: 0.32rem;

          .orderNumber {
            font-size: 0.4rem;
            font-weight: bold;
            color: #181818;
          }

          div {
            flex: 1;
            font-size: 0.35rem;
            font-weight: 400;
            text-align: left;
            margin-left: 0.2rem;

            button {
              height: 0.43rem;
              border: 0.02rem solid #999999;
              border-radius: 0.33rem;
              background: none;
              width: 1.17rem;
              color: #999999;
            }
          }

          .paymentStatus {
            font-size: 0.37rem;
            font-weight: 400;
            color: #FF0000;
          }
        }

        .items-center {
          display: flex;
          align-items: center;

          img {
            width: 2.03rem;
            height: 2.03rem;
            border-radius: 0.3rem;
            margin-right: 0.24rem;
          }

          .gameInfo {
            display: flex;
            flex-direction: column;

            .name {
              font-size: 0.37rem;
              font-weight: 500;
              color: #181818;
            }

            .money {
              font-size: 0.32rem;
              font-weight: 400;
              color: #666666;
              margin: 0.21rem 0 0.24rem 0;
            }

            .time {
              font-size: 0.32rem;
              font-weight: 400;
              color: #999999;
            }
          }
        }

        .items-bottom {
          font-size: 0.35rem;
          font-weight: 400;
          color: #999999;
          margin-top: 0.59rem;
          text-align: right;

          > span:last-child {
            font-weight: bold;
            color: #181818;
          }
        }
      }
    }
  }

  /deep/ .van-list__finished-text, /deep/ .van-loading__text {
    font-size: 0.32rem;
    text-align: center;
    color: #999999;
  }
}
</style>
